<template>
  <view class="profile-container">
    <view class="profile-header">
      <view class="avatar">👤</view>
      <view class="user-info">
        <view class="username">{{ userInfo.username || '未登录' }}</view>
        <view class="email">{{ userInfo.email || '请先登录' }}</view>
      </view>
    </view>

    <view class="profile-stats">
      <view class="stats-item">
        <view class="stats-number">{{ stats.totalChats }}</view>
        <view class="stats-label">对话次数</view>
      </view>
      <view class="stats-item">
        <view class="stats-number">{{ stats.totalDocuments }}</view>
        <view class="stats-label">上传文档</view>
      </view>
      <view class="stats-item">
        <view class="stats-number">{{ stats.totalTokens }}</view>
        <view class="stats-label">使用Token</view>
      </view>
    </view>

    <view class="profile-menu">
      <view class="menu-item" @click="goToHistory">
        <view class="menu-icon">📝</view>
        <view class="menu-text">对话历史</view>
        <view class="menu-arrow">></view>
      </view>
      
      <view class="menu-item" @click="goToSettings">
        <view class="menu-icon">⚙️</view>
        <view class="menu-text">系统设置</view>
        <view class="menu-arrow">></view>
      </view>
      
      <view class="menu-item" @click="goToHelp">
        <view class="menu-icon">❓</view>
        <view class="menu-text">帮助中心</view>
        <view class="menu-arrow">></view>
      </view>
      
      <view class="menu-item" @click="goToAbout">
        <view class="menu-icon">ℹ️</view>
        <view class="menu-text">关于我们</view>
        <view class="menu-arrow">></view>
      </view>
    </view>

    <view class="profile-actions">
      <button class="logout-btn" @click="handleLogout" v-if="isLoggedIn">
        退出登录
      </button>
      <button class="login-btn" @click="goToLogin" v-else>
        立即登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      stats: {
        totalChats: 0,
        totalDocuments: 0,
        totalTokens: 0
      },
      isLoggedIn: false
    }
  },
  onLoad() {
    this.loadUserInfo()
    this.loadStats()
  },
  onShow() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      const token = uni.getStorageSync('token')
      const userInfo = uni.getStorageSync('userInfo')
      
      if (token && userInfo) {
        this.userInfo = userInfo
        this.isLoggedIn = true
      } else {
        this.userInfo = {}
        this.isLoggedIn = false
      }
    },

    async loadStats() {
      if (!this.isLoggedIn) return

      try {
        const token = uni.getStorageSync('token')
        const response = await uni.request({
          url: 'http://localhost:5000/api/user/stats',
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          }
        })

        if (response.statusCode === 200) {
          this.stats = response.data
        }
      } catch (error) {
        console.error('加载统计信息失败:', error)
      }
    },

    goToHistory() {
      if (!this.isLoggedIn) {
        this.goToLogin()
        return
      }
      uni.navigateTo({
        url: '/pages/profile/history'
      })
    },

    goToSettings() {
      uni.navigateTo({
        url: '/pages/profile/settings'
      })
    },

    goToHelp() {
      uni.navigateTo({
        url: '/pages/profile/help'
      })
    },

    goToAbout() {
      uni.navigateTo({
        url: '/pages/profile/about'
      })
    },

    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      })
    },

    handleLogout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            this.userInfo = {}
            this.isLoggedIn = false
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.profile-header {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  backdrop-filter: blur(10rpx);
}

.avatar {
  font-size: 80rpx;
  margin-right: 30rpx;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 10rpx;
}

.email {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.profile-stats {
  display: flex;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.stats-item {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15rpx;
  padding: 30rpx;
  text-align: center;
  backdrop-filter: blur(10rpx);
}

.stats-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffd700;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.profile-menu {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  backdrop-filter: blur(10rpx);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: 30rpx;
}

.menu-text {
  flex: 1;
  font-size: 32rpx;
  color: white;
}

.menu-arrow {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
}

.profile-actions {
  text-align: center;
}

.logout-btn, .login-btn {
  width: 100%;
  padding: 30rpx;
  border-radius: 15rpx;
  border: none;
  font-size: 32rpx;
}

.logout-btn {
  background: #dc3545;
  color: white;
}

.login-btn {
  background: #28a745;
  color: white;
}
</style> 